<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>demo</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style type="text/css" scoped>
		*{
			padding: 0;
			margin: 0;
		}
		.el-form-item__label{
			margin-bottom: -0.7rem;
		}
		.el-divider{
			margin: 1rem 0;
		}
		.el-form-item{
			margin-bottom: .4rem;
		}
	</style>
</head>

<body>
	<div id="app">
		<el-row type="flex" justify="center">
			<el-col :span="12"  :xs="20" :sm="18" :md="14" :lg="12" :xl="10">
				<div class="grid-content">
					<el-col :span="14" :offset="1" :xs="19" >
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" label-position="top" size="medium ">
							<el-form-item label="OMS subscription" prop="subscription"  class="label">
								<el-col :span="24">
									<el-select v-model="ruleForm.subscription" style="width:100%" placeholder="Please select Subscribe">
										<el-option label="Free" value="0"></el-option>
										<el-option label="Starter" value="1"></el-option>
										<el-option label="Standard" value="2"></el-option>
										<el-option label="Professional" value="3"></el-option>
									</el-select>
								</el-col>

							</el-form-item>
							<el-form-item>
								<el-col :span="17" >
									<el-form-item label="weight" prop="weight">
										<el-input-number  :min="0.01" controls-position="right" :step="0.01" :precision="2" v-model="ruleForm.weight" style="width:100%"></el-input-number>
									</el-form-item>
								</el-col>
								<el-col :span='6' :offset="1">
									<el-form-item label="weight Unit" prop="weightUnit">
										<el-select v-model="ruleForm.weightUnit" style="width:100%" placeholder="Please select Subscribe">
											<el-option label="kg" value="0"></el-option>
											<el-option label="g" value="1"></el-option>
											<el-option label="lb" value="2"></el-option>
											<el-option label="oz" value="3"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-form-item>
							<el-form-item >
								<el-col :span="18">
									<el-col :span="7" >
										<el-form-item label="Volume" prop="Volume_Length" >
											<el-input v-model="ruleForm.Volume_Length"  style="width:100%"  placeholder="Length" ></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="7" :offset="1">
										<el-form-item :label="xxx" prop="Volume_Height" >
											<el-input v-model="ruleForm.Volume_Height" :precision="2" style="width:100%"  placeholder="Height" ></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="7" :offset="1">
										<el-form-item :label="xxx" prop="Volume_Width" >
											<el-input v-model="ruleForm.Volume_Width" :precision="2" style="width:100%"  placeholder="Length" ></el-input>
										</el-form-item>
									</el-col>
								</el-col>
								<el-col :span="6" >
									<el-form-item label="Length unit" prop="LengthUnit">
										<el-select v-model="ruleForm.LengthUnit" style="width:100%;" placeholder="">
											<el-option label="mm" value="0"></el-option>
											<el-option label="cm" value="1"></el-option>
											<el-option label="m"  value="2"></el-option>
											<el-option label="in" value="3"></el-option>
											<el-option label="ft" value="4"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-form-item>
							<el-form-item>
								<el-col :span="11">
									<el-form-item label="Units per Carton"  prop="UnitsPerCarton">
										<el-input-number  :min="1" controls-position="right"  v-model="ruleForm.UnitsPerCarton" style="width:100%"></el-input-number>
									</el-form-item>
								</el-col>
								<el-col :span="12" :offset="1">
									<el-form-item label="Total Unit"  prop="TotalUnit">
										<el-input-number  :min="1" controls-position="right" :step="1" :precision="0" v-model="ruleForm.TotalUnit" style="width:100%"></el-input-number>
									</el-form-item>
								</el-col>
							</el-form-item>
						</el-form>

					</el-col>
					<el-col :span="8" :offset="1" style="margin-top: 1rem" :xs="20">
						<template v-if="true">
							<div >
								<el-row>
									<el-col :span="12" >
										<span>OMS subscription</span>
									</el-col>
									<el-col :span="12"  style="text-align: right">
										<span >＄{{subscription()}}</span>
									</el-col>
								</el-row>
								<el-divider></el-divider>
								<el-row>
									<el-col :span="12" >
										<span>Inbound receiving</span>
									</el-col>
									<el-col :span="12" style="text-align: right">
										<span >＄{{InboundReceiving()}}</span>
									</el-col>
								</el-row>
								<el-divider></el-divider>
								<el-row>
									<el-col :span="12" >
										<span>Storage</span>
									</el-col>
									<el-col :span="12" style="text-align: right">
										<span >＄{{Storage()}}</span>
									</el-col>
								</el-row>
								<el-divider></el-divider>
								<el-row>
									<el-col :span="12" >
										<span>Pick and Pack </span>
									</el-col>
									<el-col :span="12" style="text-align: right">
										<span >＄{{Pack()}}</span>
									</el-col>
								</el-row>
								<el-divider></el-divider>
								<el-row>
									<el-col :span="12" >
										<span>Shipping rate</span>
									</el-col>
									<el-col :span="12" style="text-align: right">
										<span >＄{{ShippingRate()}}</span>
									</el-col>
								</el-row>
								<el-divider></el-divider>
								<el-row>
									<el-col :span="12" >
										<span>Total</span>
									</el-col>
									<el-col :span="12" style="text-align: right">
										<span >＄{{Total()}}</span>
									</el-col>
								</el-row>
							</div>
						</template>
					</el-col>
				</div>
			</el-col>

		</el-row>

	</div>
	<script>
		new Vue({
			el: '#app',
			data: function () {

				return {
					ruleForm: {
						subscription: '',//OMS订阅
						weight:0.00,//重量
						weightUnit:'0',//重量单位
						Volume_Length:null,//计算体积的长度
						Volume_Height:null,//计算体积的高度
						Volume_Width:null,//计算体积的宽度
						LengthUnit:'2',//体积单位
						UnitsPerCarton:18,//每箱单位
						TotalUnit:1,//总单元
					},
					xxx:"\u3000\u3000",//空格
					Volume:0.000,//体积
					Cartons:0,//纸箱？？？？
					OmsSubscription:[0,29,69,179],//不同版本的订阅价格
					unitsperorder:2,//每个订单的单位
					unitPriceOfFreight:19.53,//运费单价
					Visible:false,//下方总价视图
					rules: {
						subscription: [
							{ required: true, message: 'Please select OMS Subscribe', trigger: 'blur' }
						],
						weightUnit: [
							{ required: true, message: 'Please select unit', trigger: 'blur'  }
						],
						weight:[
							{required: true, message: 'Please enter weight', trigger: 'change'}
						],
						LengthUnit:[
							{required: true, message: 'Please select unit', trigger: 'change'}
								],
						UnitsPerCarton:[
							{required: true, message: 'Please select unit', trigger: 'change'}
						],
						TotalUnit:[
							{required: true, message: 'Please select unit', trigger: 'change'}
						],
						Volume_Length:[
							{required: true, message: ' ',trigger: 'change' }
							],
						Volume_Height:[
							{  message: '', trigger: 'blur' }
						],
						Volume_Width:[
							{ message: '', trigger: 'blur' }
						],
					}
				}
			},

			methods: {
				submitForm(formName) {
					this.$refs[formName].validate((valid) => {
						console.log(this.conversion())
						if (valid) {
							this.Visible=true;
							return false;
						} else {

							return false;
						}
					});

				},


				Calculator(){
					console.log(this.ruleForm.Volume_Length)
				},
				//体积计算&&换算成m函数
				//1ft=0.3048m
				//1in=0.0254m
				//1mm=0.0001m
				//1cm=0.01m
				conversion(){
					this.Volume=this.ruleForm.Volume_Length*this.ruleForm.Volume_Height*this.ruleForm.Volume_Width;
					var unitArr=[1000000000,1000000,1,61023.7440947,35.3146667];
					return (this.Volume/unitArr[this.ruleForm.LengthUnit]).toFixed(6);
				},
				//订阅价格
			 subscription(){
					if (this.ruleForm.subscription){
						return this.OmsSubscription[this.ruleForm.subscription];
					}else{
						return this.OmsSubscription[0];
					}
				},
				//入站接收价格
				InboundReceiving(){
					return (this.ruleForm.TotalUnit/this.ruleForm.UnitsPerCarton).toFixed(0);
				},
				//存储价格
				Storage(){
					return ((this.conversion()*this.ruleForm.TotalUnit)*22*1.3).toFixed(2);
				},
				//打包&&包装费
				Pack(){
					return (this.ruleForm.TotalUnit/this.unitsperorder*1.36).toFixed(2);//这个1.36我也不知道是什么，文件里就是1.06+0.3，没有标注
				},
				//运输费
				ShippingRate(){
					return (this.unitPriceOfFreight*(this.ruleForm.TotalUnit/this.unitsperorder)).toFixed(2);
				},
				//总价
				Total(){
					return  (parseFloat(this.subscription())+parseFloat(this.InboundReceiving())+parseFloat(this.Storage())+parseFloat(this.Pack())+parseFloat(this.ShippingRate())).toFixed(2);
				}
			}
		});
	</script>
</body>

</html>